import React, { useEffect, useMemo, useState } from 'react';
import { useDispatch, useSelector } from 'dva';
import { CloseCircleOutlined } from '@ant-design/icons';
import { Tabs } from 'antd';
// 组件
import EchartCom from '@/components/EchartComponents';
// utils或工具库
import _ from 'lodash';
// styles
import styles from './index.less';
// apis
import * as api from '@/services';

const LBDD = () => {
  const dispatch = useDispatch();
  const [options, setOptions] = useState(null);

  const initOptions = () => {
    const axisData = [
      'Mon',
      'Tue',
      'Wed',
      'Very Loooong Thu',
      'Fri',
      'Sat',
      'Sun',
    ];
    const data = axisData.map(function (item, i) {
      return Math.round(Math.random() * 1000 * (i + 1));
    });
    const links = data.map(function (item, i) {
      return {
        source: i,
        target: i + 1,
      };
    });
    links.pop();
    let _option = {
      title: {
        text: 'Graph on Cartesian',
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: axisData,
      },
      yAxis: {
        type: 'value',
      },
      dataZoom: [
        {
          type: 'inside', // 内置型数据区域缩放组件
          xAxisIndex: 0, // 该数据区域缩放组件控制的 x轴
          // 如果需要控制 y 轴同时不动，可以设置为 []
          yAxisIndex: false, // 该数据区域缩放组件控制的 y轴，设置为 false 表示不控制
        },
      ],
      series: [
        {
          type: 'graph',
          layout: 'none',
          coordinateSystem: 'cartesian2d',
          symbolSize: 40,
          label: {
            show: true,
          },
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [4, 10],
          data: data,
          links: links,
          lineStyle: {
            color: '#2f4554',
          },
        },
      ],
    };
    setOptions(_option);
  };

  const clickFun = (data) => {
    console.log(data);
  };

  // 初始化
  useEffect(() => {
    initOptions();
  }, []);

  return (
    <div className={styles.lbddbox}>
      {options && (
        <EchartCom
          chartClick={clickFun}
          option={options}
          style={{ width: '100%', height: '100%' }}
        />
      )}
    </div>
  );
};

export default LBDD;
